import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaLeftRightLayout,WeaLocaleProvider,WeaRightMenu,WeaOrgTree,WeaTop,WeaTab,WeaDialog,WeaReqTop } from 'ecCom';
import {Menu,Button,Tooltip,Spin} from 'antd';
import GoalBaseSetting from './GoalBaseSetting'
import GoalBasePerson from './GoalBasePerson'
import GoalImport from './GoalImport'
import * as Util from "../../util/Util";
const Item = Menu.Item;
const getLabel = WeaLocaleProvider.getLabel;
const topTab = [
    {
      title: "基础设置",
      viewcondition: "0"
    },
    {
      title: "负责人设置",
      viewcondition: "1"
    },
    {
        title: "目标导入",
        viewcondition: "2"
    }
  ];

  const topTab2 = [
    {
        title: "基础设置",
        key: "0"
    },
    {
        title: "负责人设置",
        key: "1"
    },
    {
        title: "目标导入",
        key: "2"
    }
  ];
@inject("goalBaseStore")
@observer
export default class GoalBase extends React.Component{

    constructor(props){
        super(props);
            this.state ={
            cunrrentkey:"0",  //当前的tab值
            treeId:'',
            treeName:'',
            selectType:'',
            createvisable:false, //是否打开弹出框
            isImport:false,
            menu :[
                {
                  key: '0',
                  icon:<i className="icon-coms-Save-as" />,
                  content: '保存',
                  onClick: key =>this.saveBase(),
                },
                {
                    key: '1',
                    icon:<i className="icon-coms-Save-as" />,
                    content: '保存',
                    onClick: key =>this.savePersonBaseSetting(),
                },
                {
                    key: '2',
                    icon:<i className="icon-coms-Save-as" />,
                    content: '批量删除',
                    onClick: key =>this.onDeletePersonBaseSetting(),
                },
                {
                    key: '3',
                    icon:<i className="icon-coms-Save-as" />,
                    content: '开始导入',
                    onClick: key =>this.clickImport(),
                },
            ],
            buttonType:"dashed",
        }
    }

    componentWillMount() {//一些初始化请求
        const {goalBaseStore} = this.props;
        goalBaseStore.getBaseSetting({});
    }

    handleClick = (e) => {
        this.setState({
            cunrrentkey:e.key,
        })
    }

    treeNodeClick=(ids,nodes)=>{
        this.setState({
            cunrrentkey:"1",
            treeId:nodes[0],
            treeName:ids.selectedNodes[0].props.name,
            selectType:ids.selectedNodes[0].props.type
            });
    }
    onlyClose = () =>{
        this.setState({createvisable:false});
    }

    openDialog = () =>{
        this.setState({createvisable:true});
    }

    //绑定子组件的方法
    onRef = (ref) => {
        this.child = ref
    }

    //点击导入
    clickImport = (e) =>{
        this.child.startImport()
    }

    //基础设置保存
    saveBase = () =>{
        this.child.doSaveBaseSetting();
    }

    //负责人保存
    savePersonBaseSetting = () =>{
        this.child.savePersonBaseSetting();
    }

    //负责人删除
    onDeletePersonBaseSetting = () =>{
        this.child.onDeletePersonBaseSetting();
    }

    callBack = (params) =>{
        if(params){
            this.setState({
                buttonType:"primary"
            })
        }else{
            this.setState({
                buttonType:"dashed"
            })
        }
    }

    //top的按钮
    getTopButtons = () => {
        let {cunrrentkey,buttonType} = this.state;
        const {goalBaseStore:{hasRight,responsibleRight}} = this.props;
        if(cunrrentkey == 0 && hasRight){
            return [
                <Tooltip placement="bottom" title="保存目标基础设置"><Button type="primary" onClick = {()=>this.saveBase()}  >保存</Button></Tooltip>,
              ];
        }else if(cunrrentkey == 2 && responsibleRight){
            return [
                <Tooltip placement="bottom" title="开始导入目标"><Button type="primary" onClick = {()=>this.clickImport()} >开始导入</Button></Tooltip>,
              ];
        }else if(cunrrentkey == 1 && hasRight){
            return [
                <Tooltip placement="bottom" title="保存负责人设置"><Button type="primary" onClick = {()=>this.savePersonBaseSetting()} >保存</Button></Tooltip>,
                buttonType == "dashed"?<Tooltip placement="bottom" title="批量删除负责人"><Button ref="batchDelete" type="primary" disabled >批量删除</Button></Tooltip>:<Tooltip placement="bottom" title="批量删除负责人"><Button ref="batchDelete" type="primary" onClick = {()=>this.onDeletePersonBaseSetting()} >批量删除</Button></Tooltip>,
            ];
        }
        
    }
    
    
    render(){
        const {goalBaseStore:{hasRight,responsibleRight,loading}} = this.props;
        const{selectType,treeName,treeId,cunrrentkey,menu} = this.state;
        let _menu = [];
        if(cunrrentkey == 0 && hasRight){
            _menu = menu.slice(0,1)
        }else if(cunrrentkey == 1 && hasRight){
            _menu = menu.slice(1,3);
        }else if(cunrrentkey == 2 && responsibleRight){
            _menu = menu.slice(3,4);
        }else{
            _menu = [];
        }

        return(
            <Spin spinning = {loading}>
                <div className="workrelate-goal-base">
                {/* <WeaTop
                    title={"目标设置"}
                    icon={<i className="icon-coms-Sealed" />}
                    iconBgcolor='rgb(150, 53, 138)'
                    buttons = {this.getTopButtons()}
                    showDropIcon={true}
                    dropMenuDatas={_menu}
                />
                    <WeaTab
                    datas={topTab}
                    keyParam="viewcondition" //主键
                    selectedKey={this.state.cunrrentkey}
                    onChange={v =>this.setState({cunrrentkey:v})}
                /> */}
                    <WeaReqTop
                        title={"目标设置"}
                        icon={<i className="icon-coms-Sealed" />}
                        iconBgcolor='rgb(150, 53, 138)'
                        buttons = {this.getTopButtons()}
                        showDropIcon={true}
                        dropMenuDatas={_menu}
                        tabDatas={topTab2}
                        selectedKey={this.state.cunrrentkey}
                        onChange={v =>this.setState({cunrrentkey:v})}
                        >
                        {/* <div style={{ height: 2000, background: "#fff" }}>{childComCont}</div> */}
                        <div style={{ height: 2000, background: "#fff" }}>
                        {(cunrrentkey==0||cunrrentkey==1)&&!hasRight&&Util.renderAlertPage("对不起，您暂时没有权限！","","30%")}
                        {cunrrentkey==2&&!responsibleRight&&Util.renderAlertPage("对不起，您暂时没有权限！","","30%")}
                        {cunrrentkey==0&&hasRight&&<GoalBaseSetting onRef={this.onRef} />}
                        {cunrrentkey==1&&hasRight&&
                            <WeaLeftRightLayout
                                leftCom={
                                    <div style={{ height: Util.getCurrentHeight()-100, border: '1px solid #eaeaea' }} >
                                        <WeaOrgTree needSearch={false} isLoadSubDepartment={true} isLoadUser={true} treeNodeClick={this.treeNodeClick}/>
                                    </div>
                                }
                            > 
                            <div> 
                                <GoalBasePerson treeId={treeId} treeName={treeName} selectType={selectType} onRef={this.onRef} onCallBack={(params) =>this.callBack(params)} locationKey={new Date().getTime()} />
                            </div>
                            </WeaLeftRightLayout>}
                            {cunrrentkey==2&&responsibleRight&&<GoalImport viewHeight={Util.getCurrentHeight()-300} onRef={this.onRef} />}
                        </div>
                    </WeaReqTop>
                </div>
            </Spin>
            
        )
    }
}